// LanguageSettings.tsx
import React, { useState } from "react";
import { View, Text, FlatList, TouchableOpacity } from "react-native";
import { RadioButton } from "react-native-paper";
import { MaterialIcons } from "@expo/vector-icons";
import styles from "./index.style";
import { useTheme } from "@/contexts/ThemeContext";

const languages = [
  { label: "English", value: "en" },
  { label: "简体中文", subtitle: "Simplified Chinese", value: "zh" },
];

export default function LanguageSettings() {
  const { colors } = useTheme();
  // const [showTranslateButton, setShowTranslateButton] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState("zh");

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Text style={[styles.sectionTitle, { color: colors.primary }]}>翻译</Text>

      <View style={styles.row}>
        <Text style={[styles.label, { color: colors.text.disabled }]}>
          显示翻译按钮
        </Text>
        {/*<Switch*/}
        {/*    value={showTranslateButton}*/}
        {/*    onValueChange={setShowTranslateButton}*/}
        {/*/>*/}
        <MaterialIcons name="lock" size={20} color={colors.text.disabled} />
      </View>

      <Text style={[styles.sectionTitle, { color: colors.primary }]}>语言</Text>

      <RadioButton.Group
        onValueChange={(value) => setSelectedLanguage(value)}
        value={selectedLanguage}
      >
        <FlatList
          data={languages}
          keyExtractor={(item) => item.value}
          renderItem={({ item }) => (
            <TouchableOpacity
              style={styles.languageItem}
              onPress={() => setSelectedLanguage(item.value)}
            >
              <RadioButton value={item.value} color={colors.primary} />
              <View style={styles.language}>
                <Text
                  style={[styles.languageLabel, { color: colors.text.primary }]}
                >
                  {item.label}
                </Text>
                <Text
                  style={[
                    styles.languageValue,
                    { color: colors.text.secondary },
                  ]}
                >
                  {item?.subtitle || item.label}
                </Text>
                <View
                  style={[
                    styles.bottomBorder,
                    { borderBottomColor: colors.border.divider },
                  ]}
                ></View>
              </View>
            </TouchableOpacity>
          )}
        />
      </RadioButton.Group>
    </View>
  );
}
